<template>
  <a-card class="device-scrap-message-card" title="设备报废记录">
    <a-list item-layout="horizontal" :data-source="messages">
      <template #renderItem="{ item }">
        <a-list-item>
          <template #actions>
            <a-button @click="deleteScrapMessage()"> x </a-button>
          </template>
          <a-list-item-meta>
            <template #title>
              <span>原因： {{ item.reason }}</span>
            </template>
            <template #avatar>
              <a-tag color="orange">报废</a-tag>
            </template>
          </a-list-item-meta>
          <div class="content">
            {{ item.type ? "类型：" + item.type : "" }}
          </div>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<script lang="ts">
import { unscrapDevice } from "@/controller/Cloud";
import { isString } from "@/utils/typeGuard";
import { CloudDeviceMessageSum } from "model";
import { useRoute } from "vue-router";
import { defineComponent, inject, PropType } from "vue";

export default defineComponent({
  name: "DeviceScrapMessageCard",
  components: {},
  props: {
    messages: Object as PropType<Array<CloudDeviceMessageSum>>,
  },
  setup() {
    const refresh: Function = inject("refresh") ?? new Function();
    const route = useRoute();
    const id = route.params.id;
    const deleteScrapMessage = async () => {
      if (isString(id)) {
        await unscrapDevice(id);
        refresh();
      }
    };
    return { deleteScrapMessage };
  },
});
</script>

<style scoped lang="scss"></style>
